<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS 路由实例</title>
</head>
<body ng-app='DemoApp' ng-controller="DemoAppController" style="display:none">
<h2>AngularJS 路由应用</h2>
<ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/computers">电脑</a></li>
    <li><a href="#/printers">打印机</a></li>
    <li><a href="#/blabla">其他</a></li>
</ul>
<h1>{{ message }}</h1>
<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
        var app = angular.module('DemoApp',['ngRoute'])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider
                .when('/',{
                    template:'这是首页页面',
                    controller:'mainController',
                }).when('/computers',{
                    templateUrl:'indexd.html',
                    controller:'IndexController',
                }).when('/printers',{
                    templateUrl:'options.html',
                    controller:'InputController',
                }).otherwise({
                    redirectTo:'/',
                });
        }]);
        app.controller('DemoAppController',function ($scope) {
            $scope.message = '我是message';
            $scope.$on('$viewContentLoaded', function(){
                console.log('页面加载完成了');
                $('body').fadeIn(100);
                console.log(new Date().getTime());
            });
            // 或者
            $scope.$watch('$viewContentLoaded', function() {
                console.log('页面加载完成了');
                console.log(new Date().getTime());
            });
        });
        app.controller('mainController',function ($scope) {
            $scope.message = '我是 index';
            console.log($scope.message);
        });
        app.controller('IndexController',function ($scope) {
            $scope.message = '我是 message';
            console.log($scope.message);
        });
        app.controller('InputController',function ($scope) {
            $scope.message = '我是 Input';
            console.log($scope.message);
        });
</script>


</body>
</html>